<template>
  <div class="container">
    <el-dialog :visible.sync="isShowDialog" width="600px" :modal="false" :close-on-click-modal="false"
      class="thisblack-bgc">
      <span slot="title">
        <span class="head-title">订阅行业会议</span>
        <span class="head-tip">选择行业后，为您推荐相关行业的会议</span>
      </span>
      <div v-loading="loading" class="content">
        <ul class="checkbox-ul">
          <el-checkbox-group v-model="industryVOS" size="small">
            <el-checkbox v-for="(item, index) in imIndustryData" :key="index" class="check-item" border :label="item.id">
              {{ item.name }}
              <svg-icon class="item-svg" icon-class="selected" />
            </el-checkbox>
          </el-checkbox-group>
        </ul>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="getEditIndustry">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import api from '@/api'
export default {
  name: 'SuperAdmin',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    imIndustryList: {
      type: Array,
      default: function () {
        return []
      }
    }
  },
  data() {
    return {
      loading: false,
      industryVOS: [], // 主攻行业
      imIndustryData: []
    }
  },
  computed: {
    isShowDialog: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('closeEvents', 'isMainIndustry', val)
      }
    },
    imShowId() {
      return this.$store.getters.imShowId;
    },

  },
  mounted() {
    this.getSubscribeIndustry()
  },
  methods: {
    closeDialog() {
      this.$emit('closeEvents', 'isMainIndustry', false)
    },
    async getSubscribeIndustry() {
      let form = {
        imshowId: this.imShowId
      }
      const { data } = await api.common.getSubscribeIndustry(form)
      this.industryVOS = data
      this.getImIndustry()
    },
    async getImIndustry() {
      const _this = this
      _this.loading = true
      let form = {
        parentId: 0
      }
      const { data } = await api.common.getIndustryClassifySelectByLevel(form)
      _this.imIndustryData = data.data
      _this.imIndustryData = _this.imIndustryData.filter(item => {
        if (item.name != '不适用') {
          return item
        }
      });
      _this.loading = false
    },
    async getEditIndustry() {
      let form = {
        imshowId: this.imShowId,
        industryIds: this.industryVOS
      }
      await api.common.subscribeIndustry(form)
      this.$message({ type: 'success', message: '修改订阅成功' })
      this.$emit('closeEvents', false)
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/styles/index.scss';

.container {
  .thisblack-bgc {
    background: rgba(0, 0, 0, .5);
  }

  ::v-deep .el-dialog {
    .el-dialog__header {
      padding: 12px 16px;
      background: #F5F8FC;

      .head-title {
        font-size: 16px;
        color: #202933;
        font-weight: 500;
        line-height: 1.5;
      }

      .head-tip {
        font-size: 14px;
        color: #B9C0C7;
        font-weight: 400;
        line-height: 1.5;
        margin-left: 10px;

        a {
          cursor: pointer;
          color: #0C7FF2;
        }
      }
    }

    .el-dialog__body {
      .content {
        margin-top: 20px;

        .checkbox-ul {
          width: 100%;
          text-align: center;
          white-space: pre-wrap;

          .el-checkbox-group {
            width: 505px;
            margin: 0 auto;
            @include flex(row, center, flex-start);
            flex-wrap: wrap;

            .check-item {
              width: 110px;
              height: 32px;
              padding: 0;
              margin: 0 16px 16px 0;
              border: 1px solid #E5EAF0;

              &:nth-child(4n) {
                margin-right: 0;
              }

              &.is-checked {
                border: 1px solid #0C7FF2;

                .el-checkbox__label {
                  .svg-icon {
                    display: block;
                  }
                }
              }

              .el-checkbox__input {
                display: none;
              }

              .el-checkbox__label {
                width: 100%;
                height: 100%;
                line-height: 32px;
                font-size: 14px;
                overflow: hidden;
                position: relative;
                text-overflow: ellipsis;
                white-space: nowrap;
                padding: 0 4px;
                box-sizing: border-box;
                text-align: center;

                .svg-icon {
                  position: absolute;
                  right: 0;
                  bottom: 0;
                  display: none;
                }
              }
            }
          }
        }
      }
    }

    .el-dialog__footer {
      padding: 24px 0;
      text-align: center;
      border-top: 1px solid #E5EAF0;

      .el-button {
        padding: 8px 16px;
        line-height: 1;
      }
    }
  }
}
</style>
  